<!DOCTYPE html>

<style>
div {
  display: inline-block;
  margin: 8px;
}
</style>

<div>
  no accent-color<br />
  <input type="range" /><br />
  <input type="range" disabled /><br />
  <input type="range" list="tickmarks1" /><br />
  <datalist id="tickmarks1">
    <option value="0"> </option>
    <option value="10"> </option>
    <option value="20"> </option>
    <option value="30"> </option>
    <option value="40"> </option>
    <option value="50"> </option>
    <option value="60"> </option>
    <option value="70"> </option>
    <option value="80"> </option>
    <option value="90"> </option>
    <option value="100"> </option>
  </datalist>
</div>

<div style="accent-color: auto">
  accent-color: auto<br />
  <input type="range" /><br />
  <input type="range" disabled /><br />
  <input type="range" list="tickmarks1" /><br />
  <datalist id="tickmarks1">
    <option value="0"> </option>
    <option value="10"> </option>
    <option value="20"> </option>
    <option value="30"> </option>
    <option value="40"> </option>
    <option value="50"> </option>
    <option value="60"> </option>
    <option value="70"> </option>
    <option value="80"> </option>
    <option value="90"> </option>
    <option value="100"> </option>
  </datalist>
</div>

<div style="accent-color: red">
  accent-color: red<br />
  <input type="range" /><br />
  <input type="range" disabled /><br />
  <input type="range" list="tickmarks1" /><br />
  <datalist id="tickmarks1">
    <option value="0"> </option>
    <option value="10"> </option>
    <option value="20"> </option>
    <option value="30"> </option>
    <option value="40"> </option>
    <option value="50"> </option>
    <option value="60"> </option>
    <option value="70"> </option>
    <option value="80"> </option>
    <option value="90"> </option>
    <option value="100"> </option>
  </datalist>
</div>

<div style="accent-color: green">
  accent-color: green<br />
  <input type="range" /><br />
  <input type="range" disabled /><br />
  <input type="range" list="tickmarks1" /><br />
  <datalist id="tickmarks1">
    <option value="0"> </option>
    <option value="10"> </option>
    <option value="20"> </option>
    <option value="30"> </option>
    <option value="40"> </option>
    <option value="50"> </option>
    <option value="60"> </option>
    <option value="70"> </option>
    <option value="80"> </option>
    <option value="90"> </option>
    <option value="100"> </option>
  </datalist>
</div>

<div style="accent-color: #111111">
  accent-color: #111111<br />
  <input type="range" /><br />
  <input type="range" disabled /><br />
  <input type="range" list="tickmarks1" /><br />
  <datalist id="tickmarks1">
    <option value="0"> </option>
    <option value="10"> </option>
    <option value="20"> </option>
    <option value="30"> </option>
    <option value="40"> </option>
    <option value="50"> </option>
    <option value="60"> </option>
    <option value="70"> </option>
    <option value="80"> </option>
    <option value="90"> </option>
    <option value="100"> </option>
  </datalist>
</div>

<div style="accent-color: #eeeeee">
  accent-color: #eeeeee<br />
  <input type="range" /><br />
  <input type="range" disabled /><br />
  <input type="range" list="tickmarks1" /><br />
  <datalist id="tickmarks1">
    <option value="0"> </option>
    <option value="10"> </option>
    <option value="20"> </option>
    <option value="30"> </option>
    <option value="40"> </option>
    <option value="50"> </option>
    <option value="60"> </option>
    <option value="70"> </option>
    <option value="80"> </option>
    <option value="90"> </option>
    <option value="100"> </option>
  </datalist>
</div>

<div style="color-scheme: dark">
  color-scheme: dark<br />
  <input type="range" /><br />
  <input type="range" disabled /><br />
  <input type="range" list="tickmarks1" /><br />
  <datalist id="tickmarks1">
    <option value="0"> </option>
    <option value="10"> </option>
    <option value="20"> </option>
    <option value="30"> </option>
    <option value="40"> </option>
    <option value="50"> </option>
    <option value="60"> </option>
    <option value="70"> </option>
    <option value="80"> </option>
    <option value="90"> </option>
    <option value="100"> </option>
  </datalist>
</div>

<div style="accent-color: currentcolor; color: red">
  accent-color: currentcolor; color: red<br />
  <input type="range" style="color:red" /><br />
  <input type="range" disabled style="color:red" /><br />
  <input type="range" list="tickmarks1" style="color:red" /><br />
  <datalist id="tickmarks1">
    <option value="0"> </option>
    <option value="10"> </option>
    <option value="20"> </option>
    <option value="30"> </option>
    <option value="40"> </option>
    <option value="50"> </option>
    <option value="60"> </option>
    <option value="70"> </option>
    <option value="80"> </option>
    <option value="90"> </option>
    <option value="100"> </option>
  </datalist>
</div>
